<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue项目实现主题切换</title>
  <link rel="icon" href="./assets/logo.png">
  <link rel="stylesheet" href="./css/index.css">
</head>
<!-- 参考文档： https://juejin.cn/post/6925273471421251598 -->

<body>
  <div id="app" class="app">
    <nav>
      <div class="left">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">新闻</a>
        <a href="javascript:;">文章</a>
        <a href="javascript:;">大事件</a>
      </div>
      <div class="right">
        <div class="radio" @click="handleChangeTheme" :style="{backgroundColor: theme ? '#3994f6' : '#8b8484'}">
          <div class="btn"
            :style="{animation: theme ? 'Switch .3s ease 0s 1 forwards' : 'SwitchBack .3s ease 0s 1 forwards'}"></div>
        </div>
        <a href="javascript:;">登录</a>
        <a href="javascript:;">注册</a>
      </div>
    </nav>
    <main>
      <h1>{{ title }}-{{ !theme ? '白天模式' : '深夜模式' }}</h1>
    </main>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      title: 'hello world',
      // 主题（true：白天———false：晚上）
      theme: true,
    },
    mounted() {
      // 初始化主题
      this.handleChangeTheme()
    },
    methods: {
      // 传true：白天，传false：深夜
      handleChangeTheme() {
        // 判断是白天(true)还是夜晚(false)
        let mode = this.theme ? true : false

        // 如果是mode(true)白天
        if (mode) {
          // 默认样式
          document.documentElement.removeAttribute('theme')
        } else {
          // dark样式
          document.documentElement.setAttribute('theme', 'dark')
        }
        // 每次切换后修改主题状态
        this.theme = !this.theme
      }
    },
  })
</script>

</html>